<html>

<head>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        function update_data() {
            $.ajax({
                url: "./put.php",
                type: "PUT",
                data: JSON.stringify({
                    data: $("input[name='data_input']").val()
                }),
                dataType: "json",
                contentType: "json",
                async: true,
                success: function (result, status, xhr) {
                    $("input[name='data_update']").val(result.new_data);
                },
                error: function (xhr, status, error) {
                    console.log("error");
                }
            });
        }
    </script>

</head>

<body>
    data:<input name="data_input" type="text" value="" /><br />
    after changed:<input name="data_update" type="text" value="" /><br />
    <button onclick="update_data()">update data</button><br />
</body>

</html>